<template>
  <div class="animationPage">
    <h2>列表滚动</h2>
    <div class="animation-box">
      <h4>垂直方向</h4>
      <vueSeamlessScroll
        :data="list"
        class="animation-box"
        :class-option="classOption"
      >
        <div class="box" v-for="(item, index) in list" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.text }}</span>
        </div>
      </vueSeamlessScroll>
    </div>

    <!-- <div class="animation-box2">
      <h4>水平方向</h4>
      <vueSeamlessScroll :data="list" class="animation-box2" :class-option="classOption2">
      <div class="box2" v-for="(item, index) in list" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ item.text }}</span>
      </div>
      </vueSeamlessScroll>
    </div> -->

    <vue-seamless-scroll
      :data="listData"
      :class-option="classOption3"
      class="warp"
    >
      <ul class="ul-item">
        <li class="li-item" v-for="(item, index) in listData" :key="index">
          {{ item }}
        </li>
      </ul>
    </vue-seamless-scroll>



    <vue-seamless-scroll :class-option="classOption4" class="seamless-warp3" :data="listData">
        <span slot="left-switch" class="left-arrow"></span>
        <span slot="right-switch" class="right-arrow"></span>
        <ul class="item">
            <li v-for="(item, index) in listData" :key="index">{{item}}</li>
        </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption2() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 200, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption3() {
      return {
        navigation:true,
        autoPlay: false,
        switchOffset:20,
        switchSingleStep: 100,
        // switchSingleStep: 130,
        // limitMoveNum: 2,
        direction: 3,
        // singleWidth: 130, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      }
    },
      classOption4() {
        return {
          limitMoveNum: 2,
          switchSingleStep: 140,
          direction: 3,
          navigation:true,
          autoPlay: false,
        }
      }

  },
  data() {
    return {
      list: [
        { name: "小明", text: "反馈结果大富科技" },
        { name: "小红", text: "反馈结果大富科技" },
        { name: "小蓝", text: "反馈结果大富科技" },
        { name: "小绿", text: "反馈结果大富科技" },
        { name: "小黄", text: "反馈结果大富科技" },
        { name: "小黑", text: "反馈结果大富科技" },
      ],
      listData: [1, 2, 3, 4, 5, 6],
      timer: null
    };
  },
  created() {
    let that = this;
    window.onresize = function () {
     this.timer = setTimeout(() => {
        if (that.f_IsFullScreen()) {
          alert("全屏111");
        } else {
          alert("非全屏");
        }
      }, 20);
    };
    this.$once('hook:beforeDestroy', ()=>{
      clearInterval(this.timer);
      this.timer = null;
      window.onresize = null;
    })
  },
  mounted() {
  },
  methods: {
    f_IsFullScreen() {
      console.log(document.body.scrollHeight,'window.screen.height',window.screen.height,'document.body.scrollWidth',document.body.scrollWidth, 'window.screen.width',window.screen.width);
      return (
        document.body.scrollHeight == window.screen.height &&
        document.body.scrollWidth == window.screen.width
      );
    },
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      //to fix : false || undefined == undefined
      if (isFull === undefined) isFull = false;
      return isFull;
    },
  },
};
</script>

<style lang="less" scoped>
.animationPage {
  padding: 50px;
  .animation-box {
    height: 200px;
    width: 500px;
    margin-bottom: 50px;
    background: rgba(0, 61, 144, 0.2);
    color: #fff;
    overflow: hidden;
    .box {
      height: 50px;
      line-height: 50px;
    }
  }

  .animation-box2 {
    height: 100px;
    width: 600px;
    background: rgba(0, 61, 144, 0.2);
    color: #fff;
    overflow: hidden;
    div {
      display: inline-block;
    }
    .box2 {
      height: 50px;
      width: 200px;
      line-height: 50px;
      display: inline-block;
      text-align: center;
    }
  }

  .warp {
    width: 520px;
    // width: 130px * 4;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      &.ul-item {
        display: flex;
        .li-item {
          width: 120px;
          height: 120px;
          margin-right: 10px;
          line-height: 120px;
          background-color: #999;
          color: #fff;
          text-align: center;
          font-size: 30px;
        }
      }
    }
  }


.seamless-warp3 {
        overflow: hidden;
        height: 140px;
        width: 140px * 4;
        margin: 0 auto;
        .left-arrow, .right-arrow {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #00a0e9;
            cursor: pointer;
            &:hover {
                background-color: #0f39fa;
            }
            &::before {
                position: absolute;
                content: '';
                width: 16px;
                height: 16px;
                top: 12px;
                left: 15px;
                border: 2px solid #fff;
            }
        }
        .left-arrow::before {
            border-right: 0;
            border-bottom: 0;
            transform: rotate(-45deg);
        }
        .right-arrow::before {
            border-left: 0;
            border-top: 0;
            left: 9px;
            transform: rotate(-45deg);
        }
        ul.item {
            width: 140px * 8;
            li {
                float: left;
                width: 120px;
                height: 120px;
                margin: 10px;
                line-height: 120px;
                background-color: #999;
                color: #fff;
                text-align: center;
                font-size: 30px;
            }
        }
    }
}
</style>